<template>
	<view class="wp" id="page_wp">
		<view class="nav_title" :class="{'fixed': isFixed}"  v-show="val==1">
			<view class="n_item" :style="{color: idx===0?bg:'#303133'}" @click="tabTao(0)">
				<view class="bar">即将下架</view>
				<view class="message" :style="{'border-color': idx===0?bg:'#f8f8f8',color: idx===0?bg:'#666'}">最后疯抢
				</view>
			</view>
			<view class="n_item" :style="{color: idx===1?bg:'#303133'}" @click="tabTao(1)">
				<view class="bar">今日上新</view>
				<view class="message" :style="{'border-color': idx===1?bg:'#f8f8f8',color: idx===1?bg:'#666'}">新品好货
				</view>
			</view>
			<view class="n_item" :style="{color: idx===2?bg:'#303133'}" @click="tabTao(2)">
				<view class="bar">即将开售</view>
				<view class="message" :style="{'border-color': idx===2?bg:'#f8f8f8',color: idx===2?bg:'#666'}">品牌预告
				</view>
			</view>
		</view>
		<view class="list" v-for="(item,index) in list" :style="{'border-radius':index===0? '0 0 20upx 20upx':'20upx'}"
			:key="item.id">
			<view class="title" @click="$navTo(item.url)">
				<image :src="item.thumb" mode="aspectFit"></image>
				<view class="right">
					<view class="y">
						<!-- <text class="l">佣金翻倍</text> -->
						<text>{{item.title}}</text>
					</view>
					<view class="l" v-if="item.remark.length>0">
						<text :style="{'border-color': bg,color: bg}" v-for="(ritem,ridx) in item.remark"
							:key="ridx">{{ritem}}</text>
					</view>
				</view>
			</view>
			<view class="shop">
				<view class="shop_item" v-for="citem in item.childen" :key="citem.id"
					@click="$navTo('../product/product?id='+citem.id)">
					<view class="s_image">
						<image :src="citem.thumb" mode=""></image>
					</view>
					<view class="money">
						<view>￥{{citem.saleprice}}</view>
						<!-- <view class="z" :style="{color: bg}">最多赚￥89</view> -->
					</view>
				</view>
			</view>
			<view class="time">
				<view class="t">
					<text v-if="item.endtime>0">距结束</text><uni-countdown v-if="item.endtime>0" style="flex: 1;"
						:day="day(item.endtime)" :hour="hour(item.endtime)" :minute="minute(item.endtime)"
						:second="second(item.endtime)" color="#FFFFFF" background-color="#000" />
				</view>
				<text class="s_shar" :style="{background:bg}" @click="$navTo(item.url)">进入会场</text>
			</view>
		</view>
		<view v-if="list.length<=0" class="" style="text-align: center;padding: 20upx;color: #4399fc;">
			空空如也~
		</view>
		<!-- <shar-img class="shar_img"></shar-img> -->
	</view>
</template>

<script>
	import sharImg from '@/home_page/components/share_img.vue';
	export default {
		components: {
			sharImg
		},
		name: 'shop_list',
		props: {
			bg: {
				type: String,
				default: '#8405dc,'
			},
			list: {
				type: Array,
				default: () => []
			},
			val: {
				type: [Number, String],
				default: 2
			}
		},
		data() {
			return {
				idx: 1,
				isFixed: false,
				top: 0,
				height: 0,
				lastHeight: 0,
			}
		},
		mounted(){	
			var that = this;
			var barHeight;
			uni.getSystemInfo({
				success:(e)=>{
					barHeight = e.statusBarHeight;
				}
			})
			uni.$on('onPageScroll', () => {
				let query = uni.createSelectorQuery().in(that);
				query.select('#page_wp').boundingClientRect(data => {
					that.isFixed = data.top <= 63+barHeight ? true : false;
				}).exec();
			})
		},
		methods: {
			tabTao(v) {
				if (this.idx === v) return;
				this.idx = v;
				this.$emit('change', v);
			},
			second(v) {
				return v % 60;
			},
			minute(v) {
				return v / 60 % 60;
			},
			hour(v) {
				return v / 60 / 60 % 24;
			},
			day(v) {
				return v / 60 / 60 / 24;
			}
		},
	}
</script>

<style lang="scss">
	.fixed {
	    // background: #f2f2f2;
	    position: fixed;
	    top: 0;
		// padding-top: ;
	    // padding-top: calc(var(--status-bar-height));
		padding-top: calc(var(--status-bar-height) + 126upx);
	    width: 100%;
	    z-index: 900;
		left: 0;
	  }
	.wp {
		border-radius: 20upx;
		overflow: hidden;

		.nav_title {
			background: #fff;

			.n_item {
				display: inline-block;
				letter-spacing: 1px;
				padding: 30upx 0;
				text-align: center;
				width: calc(100%/3);

				.bar {
					font-weight: bold;
				}

				.message {
					border: 1px #f8f8f8 solid;
					border-radius: 30upx;
					background: #f8f8f8;
					color: #666;
					display: inline-block;
					padding: 0 10upx;
					font-size: 22upx;
				}
			}
		}

		.list {
			background-color: #fff;
			border-radius: 20upx;
			padding: 20upx;
			margin-bottom: 20upx;

			.title {
				display: flex;
				padding-bottom: 20upx;

				image {
					border-radius: 5px;
					border: 1px #EBEEF5 solid;
					width: 100upx;
					height: 100upx;
					vertical-align: top;
				}

				.right {
					display: inline-block;
					line-height: 50upx;
					margin-left: 10upx;
					width: calc(100% - 210upx);
				}

				.y {
					color: #000;
					font-size: 30upx;

					.l {
						background: linear-gradient(90deg, #fcc453, #bc7621);
						border-radius: 30upx;
						font-size: 22upx;
						padding: 0 10upx;
						margin-right: 10upx;
					}
				}

				.l {
					overflow: hidden;
					white-space: nowrap;

					text {
						border: 1px #fff solid;
						font-size: 22upx;
						padding: 0 10upx;
						margin-right: 10upx;
					}
				}
			}

			.shop {
				.shop_item {
					display: inline-block;
					width: calc((100%/3) - 22upx);

					.s_image {
						position: relative;
						padding-bottom: 100%;
						width: 100%;

						image {
							border-radius: 10upx;
							position: absolute;
							width: 100%;
							height: 100%;
						}
					}

					.money {
						color: #fa436a;
						text-align: center;
						font-size: 34upx;
						font-weight: bold;
						line-height: 30upx;
						padding: 20upx 0 0;

						.z {
							background: #f8f8f8;
							border-radius: 30upx;
							display: inline-block;
							font-size: 22upx;
							font-weight: normal;
							padding: 0 10upx;
						}
					}
				}

				.shop_item:nth-of-type(3n + 2) {
					margin: 0 30upx;
				}
			}

			.time {
				padding: 10upx 0 30upx;
			}

			.time,
			.t {
				display: flex;
				align-items: center;
			}

			.t {
				color: #666;
				flex: 1;

				text {
					margin-right: 20upx;
				}
			}

			.s_shar {
				background: rgb(255, 20, 58);
				border-radius: 30upx;
				color: #fff;
				font-size: 26upx;
				padding: 4upx 20upx;
				letter-spacing: 1px;
			}
		}

	}

	.shar_img {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 600;
	}
</style>